<template>
    <div class="add-statement">
        <div class="statement-alert">
            <Alert class="statement-alert" type="warning" show-icon closable>
                <p class="title">上传非标准结算单要求</p>
                <div slot="desc">
                <p class="desc">1. 可以上传从ERP、DMS等维修管理系统导出的维修结算单;</p>
                <p class="desc">2. 可以上传企业自定维修结算单;</p>
                <p class="desc">3. 维修结算单必须要有VIN码(车架号);</p>
                <p class="desc">结算单上传后，系统需要1-2天时间进行数据转换。如果表单存在数据严重缺失如缺少VIN码、维修项目、车辆信息，结算单标准化不成功，维修记录将不能同步到汽车电子健康档案系统。</p>
                </div>
            </Alert>
        </div>

        <div class="content-box">
            <div class="c-header">上传非标准结算单</div>
            <import-files></import-files>
        </div>

        <div class="content-box">
            <div class="c-header">非标准结算单上传历史</div>
            <div class="c-content">
                <i-tabs :animated="false" v-model="activeTab">
                    <i-tab-pane label="标签一">
                        <Table highlight-row :stripe="false" ref="currentRowTable" :columns="tableHeader" :data="tableData"></Table>
                    </i-tab-pane>
                    <i-tab-pane label="标签二">
                        <Table highlight-row :stripe="false" ref="currentRowTable" :columns="tableHeader" :data="tableData"></Table>
                    </i-tab-pane>
                    <i-tab-pane label="标签三">
                        <Table highlight-row :stripe="false" ref="currentRowTable" :columns="tableHeader" :data="tableData"></Table>
                    </i-tab-pane>
                </i-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import pagination from 'components/commons/pagination';
    import ImportFiles from 'components/commons/ImportFiles';
    import BFooter from 'components/BFooter';  //页脚
    export default {
        components: { pagination, ImportFiles, BFooter },
        data(){
            return {
                activeTab: '',          //激活的tab
                tableHeader: [
                    { type: 'index', width: 60, align: 'center', title: '序号' },
                    { title: '维修结算单名称', key: 'name' },
                    { title: '上传时间', key: 'date' },
                    { title: '操作', key: 'action' }
                ],
                tableData: [
                    {
                        name: '002102001200346_珠海市维修厂_20180105.xls',
                        action: '下载源文件',
                        date: '2016-10-03'
                    },
                    {
                        name: '002102001200346_珠海市维修厂_20180105.xls',
                        action: '下载源文件',
                        date: '2016-10-01'
                    },
                    {
                        name: '002102001200346_珠海市维修厂_20180105.xls',
                        action: '下载源文件',
                        date: '2016-10-02'
                    },
                    {
                        name: '002102001200346_珠海市维修厂_20180105.xls',
                        action: '下载源文件',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

<style lang="less">
    .add-statement{
        padding: 30px;
        .statement-alert{
            width: 100%;
            // height: 134px;
            .title{
                color: @color-Warning;
                line-height: 20px;
                font-size: 14px;
            }
            
            .desc{
                line-height: 20px;
                color: @color-Sub;
                font-size: 12px;
            }
        }

        .content-box{
            margin-top: 20px;
        }
        
        .content-box{
            background-color: #ffffff;
            .c-header{
                height: 50px;
                line-height: 50px;
                color: #1c2438;
                background: #ffffff;
                box-shadow: 0px 1px 0px 0px #e9eaec;
                font-size: 16px;
                padding: 0 30px;
            }
            .c-content{

            }
        }
    }
</style>
